/**
 * Created by vector on 2017/11/17.
 * 主页面
 */

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    StatusBar,
    Dimensions,
    Image,
    TouchableOpacity,
    ToastAndroid,
    ListView,
    ScrollView
} from 'react-native';

import Chart from './chart';
import WarnInfo from './warn_info';
import AllWarnInfo from './all_warn_info';
import Search from './search';

const {height, width} = Dimensions.get('window');
const DataApi = "http://192.168.1.104:8087/v1/programs?";
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class Main extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            gatewayListShow:false,
            collectListShow:false,
            PretreatmentListShow:false,
            storageListShow:false,

            program_name_one:"",
            program_name_two:"",
            program_name_three:"",
            program_name_four:"",

            dataSource1: ds.cloneWithRows([]),
            dataSource2: ds.cloneWithRows([]),
            dataSource3: ds.cloneWithRows([]),
            dataSource4: ds.cloneWithRows([]),

            summary:0,
            errorDatas:''
        };

        this.navSearch = this.navSearch.bind(this);
        this.navWarn = this.navWarn.bind(this);
        this.refreshView = this.refreshView.bind(this);
    }

    componentWillMount() {
        this.getDataFromApi();
    }


    navSearch() {
        ToastAndroid.showWithGravity('搜索',ToastAndroid.CENTER,ToastAndroid.SHORT);
    }

    navWarn() {
        this.props.navigator.push({
            component:AllWarnInfo,
            passProps:{
                callback:this.refreshView
            }
        })
    }

    pushToWarnDetail(p_id,program_name) {
        this.props.navigator.push({
            component:WarnInfo,
            passProps:{
                p_id:p_id,
                program_name:program_name
            }
        })
    }

    pushToWarnChart(p_id,program_name) {
        this.props.navigator.push({
            component:Chart,
            passProps:{
                p_id:p_id,
                program_name:program_name
            }
        })
    }

    pushToSearch() {
        this.props.navigator.push({
            component:Search,
        })
    }




    alertNormal() {
        ToastAndroid.showWithGravity('运行正常',ToastAndroid.CENTER,ToastAndroid.SHORT);
    }

    async getDataFromApi() {
        try {
            let response = await fetch(DataApi);
            let responseJson = await response.json();

            console.log(responseJson);
            if (responseJson.length > 0)
            {
                for (var i=0; i<responseJson.length; i++)
                {
                    this.setState({
                        program_name_one:responseJson[0].mainPrograms.program_name,
                        program_name_two:responseJson[1].mainPrograms.program_name,
                        program_name_three:responseJson[2].mainPrograms.program_name,
                        program_name_four:responseJson[3].mainPrograms.program_name,

                        dataSource1:ds.cloneWithRows(responseJson[0].sonPrograms),
                        dataSource2:ds.cloneWithRows(responseJson[1].sonPrograms),
                        dataSource3:ds.cloneWithRows(responseJson[2].sonPrograms),
                        dataSource4:ds.cloneWithRows(responseJson[3].sonPrograms),

                        errorDatas:responseJson[4].errorDatas
                    })
                }

                for (var i=0; i<responseJson.length-1; i++)
                {
                   for (var j=0;j<responseJson[i].sonPrograms.length;j++){
                       this.setState({
                           summary:this.state.summary+1
                       })
                   }
                }
            }
            else
            {
                ToastAndroid.showWithGravity(
                    '暂无数据',
                    ToastAndroid.SHORT,
                    ToastAndroid.CENTER
                )
            }
        }
        catch (error){
            ToastAndroid.showWithGravity(
                '网络错误',
                ToastAndroid.SHORT,
                ToastAndroid.CENTER
            )
        }
    }


    refreshView(){
        this.setState({
            summary:0
        });

        fetch(DataApi)
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson);
                if (responseJson.length > 0)
                {
                    for (var i=0; i<responseJson.length; i++)
                    {
                        this.setState({
                            program_name_one:responseJson[0].mainPrograms.program_name,
                            program_name_two:responseJson[1].mainPrograms.program_name,
                            program_name_three:responseJson[2].mainPrograms.program_name,
                            program_name_four:responseJson[3].mainPrograms.program_name,

                            dataSource1:ds.cloneWithRows(responseJson[0].sonPrograms),
                            dataSource2:ds.cloneWithRows(responseJson[1].sonPrograms),
                            dataSource3:ds.cloneWithRows(responseJson[2].sonPrograms),
                            dataSource4:ds.cloneWithRows(responseJson[3].sonPrograms),

                            errorDatas:responseJson[4].errorDatas
                        })
                    }

                    for (var i=0; i<responseJson.length-1; i++)
                    {
                        for (var j=0;j<responseJson[i].sonPrograms.length;j++){
                            this.setState({
                                summary:this.state.summary+1
                            })
                        }
                    }
                }
                else
                {
                    ToastAndroid.showWithGravity(
                        '暂无数据',
                        ToastAndroid.SHORT,
                        ToastAndroid.CENTER
                    )
                }
            })
            .catch((error) => {
                ToastAndroid.showWithGravity(
                    '网络错误',
                    ToastAndroid.SHORT,
                    ToastAndroid.CENTER
                )
            });
    }


    render() {
        return (
            <View style={styles.container}>
                <StatusBar
                    backgroundColor="rgb(28,28,29)"
                    barStyle="light-content"
                />
                <View style={styles.navView}>
                    <TouchableOpacity activeOpacity={0.5} onPress={this.navSearch.bind(this)}>
                        <Image source={require('./icon/nav_search_icon.png')} style={styles.navIconLeft}/>
                    </TouchableOpacity>
                    <View style={{flex:1,flexDirection:'row',alignItems:'center',justifyContent:'center'}}>
                        <Text style={{color:'#ffffff',fontSize:25}}>
                            智能运行监控
                        </Text>

                        <Text style={{color:'rgb(201,203,204)',paddingTop:10,fontSize:16,paddingLeft:4}}>
                            {this.state.summary}
                        </Text>
                    </View>
                    <TouchableOpacity activeOpacity={0.5} onPress={this.navWarn}>
                        <Image source={require('./icon/nav_warn_icon.png')} style={styles.navIconRight}/>
                    </TouchableOpacity>
                </View>
                <ScrollView style={{backgroundColor:'rgb(34,36,41)',flex:1}}>
                    <View>
                        <View style={styles.sectionView}>
                            <Image source={require('./icon/section_icon.png')} style={styles.sectionIcon}/>
                            <Text style={styles.sectionText}>{this.state.program_name_one}</Text>
                        </View>
                        <ListView
                            automaticallyAdjustContentInsets={false}
                            dataSource={this.state.dataSource1}
                            enableEmptySections={true}
                            renderRow={(rowData) => {
                                return(
                                    <View style={{flexDirection:'row',alignItems:'center',width:width,height:60}}>
                                        <TouchableOpacity activeOpacity={0.5} onPress={rowData.program_status === 1 ? this.alertNormal.bind(this) : this.pushToWarnDetail.bind(this,rowData.p_id,rowData.program_name) }>
                                            <Image style={{width:40,height:40,marginLeft:25}} source={rowData.program_status === 1 ? require('./icon/normal_icon.png') : require('./icon/warn_icon.png')}/>
                                        </TouchableOpacity>
                                            <View style={{flexDirection:'column',justifyContent:'center',marginLeft:10,marginRight:25}}>
                                            <Text style={{fontSize:15,color:'#ffffff'}}>
                                                {rowData.program_name}
                                            </Text>
                                            <View style={{width:width-100,flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    {rowData.save_time===null?'- - - - - - - - - - - - - - - - - - ':rowData.save_time}
                                                </Text>

                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    <Text style={{fontSize:13,color:'rgb(125,178,255)'}}>H</Text> {rowData.hourly_deal_datas}
                                                </Text>
                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    <Text style={{fontSize:13,color:'rgb(128,255,255)'}}>D</Text> {rowData.sum_deal_datas}
                                                </Text>
                                                <TouchableOpacity activeOpacity={0.5} onPress={this.pushToWarnChart.bind(this,rowData.p_id,rowData.program_name)}>
                                                <Image style={{width:18,height:18}} source={require('./icon/chart_icon.png')}/>
                                                </TouchableOpacity>
                                            </View>
                                        </View>
                                    </View>
                                )
                            }}
                        />
                    </View>
                    <View>
                        <View style={styles.sectionView}>
                            <Image source={require('./icon/section_icon.png')} style={styles.sectionIcon}/>
                            <Text style={styles.sectionText}>{this.state.program_name_two}</Text>
                        </View>
                        <ListView
                            automaticallyAdjustContentInsets={false}
                            dataSource={this.state.dataSource2}
                            enableEmptySections={true}
                            renderRow={(rowData) => {
                                return(
                                    <View style={{flexDirection:'row',alignItems:'center',width:width,height:60}}>
                                        <TouchableOpacity activeOpacity={0.5} onPress={rowData.program_status === 1 ?  this.alertNormal.bind(this) : this.pushToWarnDetail.bind(this,rowData.p_id,rowData.program_name)}>
                                            <Image style={{width:40,height:40,marginLeft:25}} source={rowData.program_status === 1 ? require('./icon/normal_icon.png') : require('./icon/warn_icon.png')}/>
                                        </TouchableOpacity>
                                        <View style={{flexDirection:'column',justifyContent:'center',marginLeft:10,marginRight:25}}>
                                            <Text style={{fontSize:15,color:'#ffffff'}}>
                                                {rowData.program_name}
                                            </Text>
                                            <View style={{width:width-100,flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    {rowData.save_time===null?'- - - - - - - - - - - - - - - - - - ':rowData.save_time}
                                                </Text>

                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    <Text style={{fontSize:13,color:'rgb(125,178,255)'}}>H</Text> {rowData.hourly_deal_datas}
                                                </Text>
                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    <Text style={{fontSize:13,color:'rgb(128,255,255)'}}>D</Text> {rowData.sum_deal_datas}
                                                </Text>
                                                <TouchableOpacity activeOpacity={0.5} onPress={this.pushToWarnChart.bind(this,rowData.p_id,rowData.program_name)}>
                                                    <Image style={{width:18,height:18}} source={require('./icon/chart_icon.png')}/>
                                                </TouchableOpacity>
                                            </View>
                                        </View>
                                    </View>
                                )
                            }}
                        />
                    </View>

                    <View>
                        <View style={styles.sectionView}>
                            <Image source={require('./icon/section_icon.png')} style={styles.sectionIcon}/>
                            <Text style={styles.sectionText}>{this.state.program_name_three}</Text>
                        </View>
                        <ListView
                            automaticallyAdjustContentInsets={false}
                            dataSource={this.state.dataSource3}
                            enableEmptySections={true}
                            renderRow={(rowData) => {
                                return(
                                    <View style={{flexDirection:'row',alignItems:'center',width:width,height:60}}>
                                        <TouchableOpacity activeOpacity={0.5} onPress={rowData.program_status === 1 ?  this.alertNormal.bind(this) : this.pushToWarnDetail.bind(this,rowData.p_id,rowData.program_name)}>
                                            <Image style={{width:40,height:40,marginLeft:25}} source={rowData.program_status === 1 ? require('./icon/normal_icon.png') : require('./icon/warn_icon.png')}/>
                                        </TouchableOpacity>
                                        <View style={{flexDirection:'column',justifyContent:'center',marginLeft:10,marginRight:25}}>
                                            <Text style={{fontSize:15,color:'#ffffff'}}>
                                                {rowData.program_name}
                                            </Text>
                                            <View style={{width:width-100,flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    {rowData.save_time===null?'- - - - - - - - - - - - - - - - - - ':rowData.save_time}
                                                </Text>

                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    <Text style={{fontSize:13,color:'rgb(125,178,255)'}}>H</Text> {rowData.hourly_deal_datas}
                                                </Text>
                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    <Text style={{fontSize:13,color:'rgb(128,255,255)'}}>D</Text> {rowData.sum_deal_datas}
                                                </Text>
                                                <TouchableOpacity activeOpacity={0.5} onPress={this.pushToWarnChart.bind(this,rowData.p_id,rowData.program_name)}>
                                                    <Image style={{width:18,height:18}} source={require('./icon/chart_icon.png')}/>
                                                </TouchableOpacity>
                                            </View>
                                        </View>
                                    </View>
                                )
                            }}
                        />
                    </View>

                    <View>
                        <View style={styles.sectionView}>
                            <Image source={require('./icon/section_icon.png')} style={styles.sectionIcon}/>
                            <Text style={styles.sectionText}>{this.state.program_name_four}</Text>
                        </View>
                        <ListView
                            automaticallyAdjustContentInsets={false}
                            dataSource={this.state.dataSource4}
                            enableEmptySections={true}
                            renderRow={(rowData) => {
                                return(
                                    <View style={{flexDirection:'row',alignItems:'center',width:width,height:60}}>
                                        <TouchableOpacity activeOpacity={0.5} onPress={rowData.program_status === 1 ?  this.alertNormal.bind(this) : this.pushToWarnDetail.bind(this,rowData.p_id,rowData.program_name)}>
                                            <Image style={{width:40,height:40,marginLeft:25}} source={rowData.program_status === 1 ? require('./icon/normal_icon.png') : require('./icon/warn_icon.png')}/>
                                        </TouchableOpacity>
                                        <View style={{flexDirection:'column',justifyContent:'center',marginLeft:10,marginRight:25}}>
                                            <Text style={{fontSize:15,color:'#ffffff'}}>
                                                {rowData.program_name}
                                            </Text>
                                            <View style={{width:width-100,flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    {rowData.save_time===null?'- - - - - - - - - - - - - - - - - - ':rowData.save_time}
                                                </Text>

                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    <Text style={{fontSize:13,color:'rgb(125,178,255)'}}>H</Text> {rowData.hourly_deal_datas}
                                                </Text>
                                                <Text style={{fontSize:12,color:'rgb(133,134,135)'}}>
                                                    <Text style={{fontSize:13,color:'rgb(128,255,255)'}}>D</Text> {rowData.sum_deal_datas}
                                                </Text>
                                                <TouchableOpacity activeOpacity={0.5} onPress={this.pushToWarnChart.bind(this,rowData.p_id,rowData.program_name)}>
                                                    <Image style={{width:18,height:18}} source={require('./icon/chart_icon.png')}/>
                                                </TouchableOpacity>
                                            </View>
                                        </View>
                                    </View>
                                )
                            }}
                        />
                    </View>
                </ScrollView>
            </View>

        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    navView: {
        backgroundColor:'rgb(28,28,29)',
        width:width,
        height:50,
        flexDirection:'row',
        alignItems:'center',
    },
    navIconLeft: {
        width:40,
        height:40,
        marginLeft:20,
    },
    navIconRight: {
        width:26,
        height:26,
        marginRight:20
    },
    sectionView: {
        width:width,
        height:46,
        flexDirection:'row',
        alignItems:'center',
    },
    sectionIcon: {
        width:23,
        height:20,
        marginLeft:18
    },
    sectionText: {
        fontSize:22,
        color:'#ffffff',
        marginLeft:5
    }


});
